import React, { useState, useEffect, Suspense } from 'react';
import { slide_router } from '@/router/index'
import { useRoutes, useNavigate, Outlet } from 'react-router-dom'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, theme, Avatar, Breadcrumb, Dropdown, message } from 'antd';

import type { MenuProps } from 'antd';
import { useSelector, useDispatch } from 'react-redux'
import { changeCollapsed } from '@/redux/store'

import '@/style/scss/layout.scss'
import '@/style/scss/style.scss'

const { Header, Content } = Layout;

const AppSlide: React.FC = (props: any) => {

  const [messageApi, contextHolder] = message.useMessage();

  const element = useRoutes(slide_router)

  const navigate = useNavigate()

  const dispatch = useDispatch()

  const { bread } = useSelector((state: any) => state.afeng)
  const { nick } = useSelector((state: any) => state.afeng)
  const { collapsed } = useSelector((state: any) => state.afeng)



  const {
    token: { colorBgContainer },
  } = theme.useToken();


  const quit = () => {
    messageApi.open({
      type: 'success',
      content: '退出成功',
    });
    setTimeout(() => navigate('/login'), 1000)
    sessionStorage.removeItem('tokenMsg')
  }

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <span>{nick}</span>
      ),
      icon: <UserOutlined />,
    },
    {
      key: '2',
      label: (
        <span rel="noopener noreferrer" onClick={quit}>
          退出登录
        </span>
      ),
      danger: true
    },
  ]
  return (
    <Layout className="site-layout">
      {contextHolder}
      {/** 头部 */}
      <Header style={{ padding: 0, background: colorBgContainer }}
        className='Header'
      >
        <div>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => dispatch(changeCollapsed(!collapsed)),
          })}
          <Breadcrumb style={{ margin: '16px 0' }} items={bread} />
        </div>
        <div>
          <Dropdown menu={{ items }} placement="bottom" arrow={{ pointAtCenter: true }} overlayStyle={{ textAlign: 'center' }}>
            <Avatar style={{ backgroundColor: '#00BFFF' }} icon={<UserOutlined />} />
          </Dropdown>
          <span>欢迎回来<span style={{ fontWeight: 700 }}>{nick}</span></span>
        </div>
      </Header>
      {/** 内容 */}
      <Content
        style={{
          margin: '24px 16px',
          padding: 24,
          minHeight: 280,
          background: colorBgContainer,
          overflow: 'auto'
        }}
      >
        <Suspense fallback={<>路由加载中</>} >
          {element}
        </Suspense>
      </Content>
    </Layout>
  );
};

export default AppSlide;
